<template>
  <!-- 标签页面 -->
  <div>
    <!-- 卡片试图整体区域 -->
    <el-card class="box-card">
      <!-- 头部标签内容区域 -->
      <el-row :gutter="10">
        <el-col :span="2">
          <span>标签名称</span>
        </el-col>
        <el-col :span="5">
          <el-input v-model="queryInfo.tagName" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col :span="1">
          <span>状态</span>
        </el-col>
        <el-col :span="5">
          <el-select v-model="queryInfo.state" placeholder="请选择">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-button @click="restore">清 除</el-button>
          <el-button type="primary" @click="getTagsList">搜 索</el-button>
        </el-col>
        <el-col :span="3">
          <el-button v-show="this.queryInfo.subjectID!==undefined" type="text" @click="Goback">返回学科</el-button>
        </el-col>
        <el-col :span="1" v-show="this.queryInfo.subjectID==undefined" :offset="2"></el-col>
        <el-col :span="3">
          <el-button icon="el-icon-edit" type="success" @click="addTags">新增标签</el-button>
        </el-col>
      </el-row>
      <!-- 信息内容提示区域 -->
      <el-alert :title="`一共${counts}条数据`" type="info" :closable="false"></el-alert>
      <!-- 表格内容区域 -->
      <el-table :data="tagsLabelList" stripe border style="width: 100%">
        <el-table-column type="index" label="序号" width="180"></el-table-column>
        <el-table-column prop="subjectName" label="所属学科" width="180"></el-table-column>
        <el-table-column prop="tagName" label="标签名称"></el-table-column>
        <el-table-column prop="username" label="创建者"></el-table-column>
        <el-table-column prop="addDate" label="创建日期"></el-table-column>
        <el-table-column prop="state" label="状态" v-slot="scope">
          <span v-if="scope.row.state==1">已启用</span>
          <span v-else>已禁用</span>
        </el-table-column>
        <el-table-column prop="address" label="操作" v-slot="scope">
          <template v-if="scope.row.state==1">
            <el-button type="text" @click="startUsing(scope.row.id)">禁用</el-button>
            <el-button type="text" @click="addTags(scope.row,333)">修改</el-button>
            <el-button type="text" @click="delTags(scope.row.id)">删除</el-button>
          </template>
          <template v-else>
            <el-button type="text" @click="stopUsing(scope.row.id)">启用</el-button>
            <el-button type="text" disabled>修改</el-button>
            <el-button type="text" disabled>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
      ></el-pagination>
    </el-card>
    <!-- 新增标签的dialog -->
    <el-dialog title="提示" :visible.sync="TagsdialogVisible" width="30%">
      <!-- 表单验证区域 -->
      <el-form
        :model="tagsRuleForm"
        :rules="addrules"
        ref="tagsRuleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="活动名称" prop="subjectID">
          <el-select v-model="tagsRuleForm.subjectID" placeholder="请选择">
            <el-option
              v-for="item in EasyList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动名称" prop="tagName">
          <el-input v-model="tagsRuleForm.tagName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="TagsdialogVisible = false">取 消</el-button>
        <el-button type="primary" v-if="control!=3" @click="submitForm('tagsRuleForm')">确 定</el-button>
        <el-button type="primary" v-else @click="modification('tagsRuleForm')">修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// 导入页面所需的方法
import {
  tagsList,
  RemoveTags,
  forbidden,
  start,
  append,
  amend
} from '@/api/subject/tags.js'
export default {
  data() {
    return {
      // 请求页面数据所需要的参数
      queryInfo: {
        page: 1,
        pagesize: 5,
        subjectID: null,
        tagName: '',
        state: null
      },
      // 下拉选框所需要的数据
      selectData: {},
      // 页面数据总条数
      counts: 0,
      // 获取到的页面数据
      tagsLabelList: [],
      // 新增标签的dialog
      TagsdialogVisible: false,
      // 弹出框的数据绑定
      tagsRuleForm: {
        subjectID: null,
        tagName: null,
        id: null
      },
      // 验证规则
      addrules: {
        subjectID: [
          { required: true, message: '请选择标签名称', trigger: 'blur' }
        ],
        tagName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      // 简单学科列表目录
      EasyList: {},
      // 控制按钮
      control: 233
    }
  },
  created() {
    this.getTagsList()
  },
  computed: {},
  methods: {
    // 获取页面所需的数据
    async getTagsList() {
      this.queryInfo.subjectID = this.$route.query.sbjdataid
      const { data } = await tagsList(this.queryInfo)
      // console.log(this.queryInfo)
      this.counts = data.counts
      this.tagsLabelList = data.items
    },
    // 返回学科
    Goback() {
      console.log(this.queryInfo.subjectID)
      this.$router.go(-1)
    },
    // 清除按钮
    restore() {
      this.queryInfo.state = null
      this.queryInfo.tagName = ''
      this.getTagsList()
    },

    // 每页数据条数改变
    handleSizeChange(val) {
      this.queryInfo.pagesize = val
      this.getTagsList()
    },
    // 页码值改变
    handleCurrentChange(val) {
      this.queryInfo.page = val
      this.getTagsList()
    },
    // 新增标签
    addTags(e, r) {
      this.TagsdialogVisible = true

      this.tagsRuleForm.tagName = e.tagName
      this.tagsRuleForm.subjectID = e.subjectID
      this.tagsRuleForm.id = e.id
      if (r === 333) {
        this.control = 3
      } else {
        this.control = 2
      }
      console.log(this.control)
    },
    // 新增标签确定按钮
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          append(this.tagsRuleForm)
          this.TagsdialogVisible = false
        } else {
          return false
        }
      })
      this.getTagsList()
      this.$refs[formName].resetFields()
    },
    // 修改标签确定按钮
    modification(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          amend(this.tagsRuleForm)
          this.getTagsList()
        } else {
          return false
        }
      })
      this.TagsdialogVisible = false
      this.$refs[formName].resetFields()
      // this.getTagsList()
    },
    // 启用按钮
    startUsing(e) {
      start(e)
      this.getTagsList()
    },
    // 禁用
    stopUsing(e) {
      forbidden(e)
      this.getTagsList()
    },
    // 删除当前行的数据
    delTags(e) {
      this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          RemoveTags(e)
          this.getTagsList()
          // this.$router.go(0)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      console.log(e)
    }
  }
}
</script>

<style  lang="less" scoped>
/deep/.el-alert {
  margin: 20px 0;
}
/deep/.el-pagination {
  margin-top: 20px;
}
/deep/.el-col-2,
.el-col-1 {
  display: block;
  margin-top: 10px;
}
</style>
